@charset "utf-8";
@import "_common.scss";
@import "_init.scss";
.web {
    background: url(../img/website_bg.jpg);
    //头部  S
    header{
        height: r(90);
        width: 100%;
        background: #000000;
        color: #FFFFFF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .left{
            a{
                p{
            font-size: r(28);
            color: #FFFFFF;
            }
            }
        }
        .center{
            font-size: r(34);
        }
        .right{
            i{
            font-size: r(30);
            color: #FFFFFF;
            }
        }
    }
    //头部  E
    //中部  S
    section{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .directory{
            margin: 0 auto;
            width: 96%;
            height: r(50);
            font-size: r(22);
            color: #FFFFFF;
            background: #5fa1df;
            text-align: center;
            border-radius: r(8);
            line-height: r(50);
        }
        .jianjie_box{
         width: 98%;
//      height: r(990); 
        column-count: 2;
        column-gap: 0;
//      break-inside: avoid;

        
        .jianjie{
           
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: r(305);
            height: r(300);
            margin: r(8);
          overflow: auto;
            .renqi{
                color: #FFFFFF;
                background: #e20000;
                font-size: r(36);
                width: r(250);
                height: r(60);
                text-align: center;
                line-height: r(60);
                transform: skewX(-30deg);
                position: relative;
                left: r(-40);
                top: r(20);
                &::before{
                    content: "人气商品";
                    color: #FFFFFF;
                    transform: skewX(30deg);
                    position: absolute;
                    left: r(60);
                    top: 0;
//                  border-right: #FFFFFF r(2) solid ;
                }
                &::after{
                    content: "";
                    background: #FFFFFF;
                    width: r(8);
                    height: r(60);
                    position: absolute;
                    right: r(10);
                    top: 0;
                }
            }
            .tu{
                width: r(239);
                height: r(175);
                align-self: center;
                
                a{
                    width: 100%;
                    height: 100%;
                    display: block;
                    img{
                        width: 100%;
                    }
                }
            }
            
            .jieshao{
                align-self: flex-start;
                font-size: r(18.88);
                color: #c5c5c5;
            }
            .jiage{
                align-self: flex-end;
                font-size: r(25.61);
                color: #eb7575;
            }
        }
        }
    }
    //中部  E
    //底部  S
    footer{
        display: none;
    }
    //底部  E
}